<template>
  <div class="table-temperature" ref="main" style="width: 100%;height:400px;" v-loading="loading"></div>
</template>

<script>
import data from '@/assets/data/aqi-beijing'
import mixins from '@/mixins'
export default {
  mixins:[mixins],
  props:{
    tempData:Object
  },
  name: "ChartTableTem",
  data(){
    return{
      data:[],
      loading:false
    }
  },
  watch:{
    deep:true,
    tempData:function(newValue,oldValue){
     this.data = newValue
     this.showCharts()
     this.loading = false
    }
  },
  methods:{
    showCharts(){
      let myChart = this.$echarts.init(this.$refs.main);
       let d = this.data.timeValueList;
        let option = {
          title: {
            text: this.data.sensorName
          },
          tooltip: {
            trigger: "axis"
          },
          xAxis: {
            data: d.map(function(item) {
              return item.time;
            })
          },
          yAxis: {
            name: this.data.sensorUnit,
            splitLine: {
              show: false
            }
          },
          toolbox: {
            left: "center",
            feature: {
              dataZoom: {
                yAxisIndex: "none"
              },
              restore: {},
              saveAsImage: {}
            }
          },
          dataZoom: [
            {
              startValue: "2014-06-01"
            },
            {
              type: "inside"
            }
          ],
          visualMap: {
            top: 10,
            right: 10,
            pieces: [
              {
                gt: 0,
                lte: 50,
                color: "#096"
              },
              {
                gt: 50,
                lte: 100,
                color: "#ffde33"
              },
              {
                gt: 100,
                lte: 150,
                color: "#ff9933"
              },
              {
                gt: 150,
                lte: 200,
                color: "#cc0033"
              },
              {
                gt: 200,
                lte: 300,
                color: "#660099"
              },
              {
                gt: 300,
                color: "#7e0023"
              }
            ],
            outOfRange: {
              color: "#999"
            }
          },
          series: {
            name: this.data.sensorUnit,
            type: "line",
            data: d.map(function(item) {
              return item.value;
            }),
            markLine: {
              silent: true,
              data: [
                {
                  yAxis: 50
                },
                {
                  yAxis: 100
                },
                {
                  yAxis: 150
                },
                {
                  yAxis: 200
                },
                {
                  yAxis: 300
                }
              ]
            }
          }
        };
        myChart.setOption(option);
        this.loading = false
        myChart.on('click', function (params) {
            console.log(params)
        });
    }
  },
  mounted() {
    this.data = this.tempData
    this.loading = true
    this.showCharts()
  }
};
</script>
<style scoped lang="less">
</style>
